<template>
  <screenContainer>
    <div class="board-box ant-board">
      <div class="r1">
        <box2 title="实时监测">
          <div class="r1c1">
            <div class="block-main r1-box">
              <div class="fontColorBlue">
                <span class="iconfont icon-u25"></span>
              </div>

              <div class="item-circle">
                <div class="item-liqued" id="liquedOne"></div>
                <div class="__text">{{ current[0]?.classifyName }}</div>
              </div>
              <div class="item-circle">
                <div class="item-liqued" id="liquedTwo"></div>
                <div class="__text">{{ current[1]?.classifyName }}</div>
              </div>
              <div class="item-circle">
                <div class="item-liqued" id="liquedThree"></div>
                <div class="__text">{{ current[2]?.classifyName }}</div>
              </div>
              <div class="fontColorRed">
                <span class="iconfont icon-qiti"></span>
              </div>
              <div class="item-circle">
                <div class="item-liqued" id="liquedFour"></div>
                <div class="__text">{{ current[3]?.classifyName }}</div>
              </div>
            </div>
          </div>

        </box2>
        <box2 title="报警记录" class="r1c2">
          <div class="block-main alarm-box" @mouseenter="scrollStop" @mouseleave="alarmMouseLeave">
            <div class="ul1">
              <div v-for="(item, index) in alarm" :key="item.id"
                :class="`alarm-item ${item.pocessStatus == 1 ? 'alarm-red' : 'alarm-default'}`">
                <div>{{ index + 1 }}&nbsp;&nbsp;</div>
                <div>{{ item.alarmTime }}&nbsp;</div>
                <div class="alarm-text">
                  <a-tooltip overlayClassName="board-tootip">
                    <template #title>{{ item.alarmContent }}</template>
                    {{ item.alarmContent }}
                  </a-tooltip>
                </div>
                <div>{{ item.processStatus == 1 ? '已处理' : '未处理' }}</div>
              </div>
            </div>
            <div class="ul2"></div>
          </div>
        </box2>
      </div>
      <div class="r15">
        <a-radio-group v-model:value="dateType" button-style="solid" size="small">
          <a-radio-button value="day">时</a-radio-button>
          <a-radio-button value="month">日</a-radio-button>
          <a-radio-button value="year">月</a-radio-button>
        </a-radio-group>
      </div>
      <div class="r2">
        <box6 title="PH值">
          <div class="block-main" id="PH">

          </div>
        </box6>
        <box6 title="化学需氧量">
          <div class="block-main" id="O2">
            <Progress v-for="item in elecRank" :key="item.name" :text="item.name" :value="item.value" :unit="'KWh'"
              :percent="item.percent" strokeColor="rgb(149, 242, 4)"></Progress>
          </div>
        </box6>
        <box6 title="氨氮">
          <div class="block-title"></div>
          <div class="block-main" id="ammonia">

          </div>
        </box6>
        <box6 title="非甲烷总烃">
          <div class="block-main" id="nonMethane">
          </div>
        </box6>
      </div>
    </div>
    <div class="ws-alarm-box" v-if="wsAlarm.length">
      <div v-for="(item, index) in wsAlarm" class="ws-alarm" :key="index">
        <Corner />
        <div class="ws-title">报警消息</div>
        <div class="ws-content">
          <div>报警名称：{{ item.content }}</div>
          <div>报警描述：{{ item.content }}</div>
          <div>报警时间：{{ item.content }}</div>
          <div class="ws-clese-box">
            <div class="ws-close" @click="closeAlarm(index)">关闭</div>
          </div>

        </div>
      </div>
    </div>

  </screenContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue';
import screenContainer from '../compNew/boadrContainer.vue';
import Corner from '../comp/corner.vue';
import useLine from './useLine';
import Progress from '../comp/progress.vue';
import useData from './useData';
import useLiqued from './useLiqued';
import box2 from '../compNew/box2.vue'
import box6 from '../compNew/box6.vue'
import { useAlarmInfo } from '@/hooks/web/useAlarmInfo'

let timmer: any = null;
const scrollStop = () => {
  clearInterval(timmer);
}
const testws = [{
  content: '告警消息'
}, {
  content: '告警消息'
}];
const wsAlarm = reactive<any>([]);
const closeAlarm = (index) => {
  wsAlarm.splice(index, 1);
}
const setWsAlarm = (message) => {
  if (wsAlarm.length === 2) {
    wsAlarm.splice(wsAlarm.length - 1, 1);
    wsAlarm.unshift(message);
  } else {
    wsAlarm.unshift(message);
  }
}

useAlarmInfo({ deviceTypes: ['Environment'] });

const scroll = (isLeave?: boolean) => {
  clearInterval(timmer);
  const ul1: any = document.querySelector('.ul1');
  const ul2: any = document.querySelector('.ul2');
  const box: any = document.querySelector('.alarm-box');
  ul2.innerHTML = ul1?.innerHTML;
  !isLeave && (box.scrollTop = 0);
  timmer = setInterval(() => {
    if (box.scrollTop > ul1.scrollHeight) {
      box.scrollTop = 0;
    } else {
      box.scrollTop += 2;
    }
  }, 60);
}
const { current, alarm, sort, dateType } = useData();
const alarmMouseLeave = () => {
  if (alarm.value.length > 8) {
    scroll(true);
  }
}
let fullDom = '.page-box';
let isMobile = false;
const loading = ref(true);
const getAlarmClass = (status: any) => {
  if (status === 2) {
    return 'alarm-red'
  }
  if (status === 3) {
    return 'alarm-yellow'
  }
  return 'alarm-default'
}
useLiqued({
  id: 'liquedOne',
  data: current,
  key: 0,
});
useLiqued({
  id: 'liquedTwo',
  data: current,
  key: 1,
});
useLiqued({
  id: 'liquedThree',
  data: current,
  key: 2,
});
useLiqued({
  id: 'liquedFour',
  data: current,
  key: 3,
});
useLine({
  id: 'PH',
  lineColor: '#4f7f55',
  areaColor: 'rgba(94,149,94, 0.6)',
  data: sort,
  key: 0
});
useLine({
  id: 'O2',
  lineColor: '#27b588',
  areaColor: 'rgba(151,51,45, 0.6)',
  data: sort,
  key: 1,
  yname: '单位：mg/L'
});
useLine({
  id: 'ammonia',
  lineColor: '#81784a',
  areaColor: 'rgba(149,130,86, 0.6)',
  data: sort,
  key: 2,
  yname: '单位：mg/L'
});
useLine({
  id: 'nonMethane',
  lineColor: '#83558b',
  areaColor: 'rgba(131,85,139,0.6)',
  data: sort,
  key: 3,
  yname: '单位：m³'
});
setTimeout(() => {
  loading.value = false;
}, 1500);
watch(alarm, () => {
  setTimeout(() => {
    clearInterval(timmer);
    alarmMouseLeave();
  }, 2000)
})
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.board-box {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;

  @media screen and (max-width: 800px) {
    min-height: 100%;
    padding-bottom: 50px;
    overflow-y: auto;

    .r1 {
      display: block;
      height: auto;

      .r1c1 {
        // height: 200px;
        padding-bottom: 20px;
      }

      .r1-box {
        display: block;
        overflow-y: hidden;

        .fontColorBlue,
        .fontColorRed {
          display: none;
        }

        >div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50%;
          float: left;
        }
      }

      .r1c2 {
        height: 35vh;
        margin-top: 20px;
      }
    }

    .r15 {
      margin-top: 30px;
    }

    .r2 {
      display: block;
    }

    .board-box-6 {
      height: 35vh;
      margin-top: 10px;
    }
  }

  .r1 {
    display: flex;
    height: 26vh;
    margin-bottom: 1vh;
    gap: 10px;

    .r1c1 {
      height: 100%;
      padding: 0 4vh 0 0;
    }

    .r1-box {
      display: flex;
      align-items: center;

      .fontColorBlue {
        padding-right: 0.5vh;
        padding-left: 3vh;
        color: #03d9eb;

        span {
          font-size: 10vh;
        }
      }

      .fontColorRed {
        padding-right: 0.5vh;
        padding-left: 5vh;
        color: #cd5877;

        span {
          font-size: 10vh;
        }
      }

      .item-liqued {
        width: 15vh;
        height: 15vh;
        overflow: hidden;
      }

      .item-circle {
        text-align: center;

        .__circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 15vh;
          height: 15vh;
          margin: 0 2vh;
          border: 0.5vh solid #ddd;
          border-radius: 100%;

          &.colorGreen {
            border-color: #27b588;
          }

          &.colorRed {
            border-color: #ad6e7c;
          }

          &.colorYellow {
            border-color: #9d8c06;
          }
        }

        .__value {
          color: #fff;
          font-size: 3.6vh;
        }

        .__text {
          padding-top: 5px;
          color: #BCB8FB;
          font-size: 1.8vh;
          font-weight: 600;
          line-height: 2vh;
        }
      }
    }

    .r1-item {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      width: 30vh;
      height: 8vh;
      padding: 3vh 2vh;
      border: 1px solid rgb(0 255 255);
      background: linear-gradient(90deg,
          rgb(9 19 44) 0%,
          rgb(9 19 44) 39%,
          rgb(9 55 79) 100%,
          rgb(9 55 79) 100%);
      color: rgb(220 176 24);
      font-size: 2vh;
      font-weight: 600;

      span {
        font-size: 2.8vh;
      }
    }

    .r1-item+.r1-item {
      margin-left: 2vh;
    }

    .r1c2 {
      flex: 1;
    }

    .alarm-box {
      position: absolute;
      top: 4vh;
      right: 1vh;
      left: 1vh;
      height: calc(100% - 5vh);
      overflow: hidden;

      .alarm-item {
        display: flex;
        height: 2.8vh;
        margin-bottom: 2px;
        padding: 0 2vh;
        overflow: hidden;
        background: rgb(0 0 0 / 35%);
        line-height: 2.8vh;
        cursor: pointer;

        &:hover {
          background: rgb(0 0 0 / 65%);
        }

        >div {
          flex-shrink: 0;
        }

        .alarm-text {
          flex: 1;
          margin: 0 1vh;
          overflow: hidden;

          /* 确保文本在一行内显示，不换行 */
          text-overflow: ellipsis;
          white-space: nowrap;

          /* 使用省略号表示文本溢出 */
        }

        &.alarm-red {
          color: #d95421;
        }

        &.alarm-yellow {
          color: #bdb22f;
        }

        &.alarm-default {
          color: #BCB8FB;
        }
      }
    }
  }

  .r15 {
    display: flex;
    box-sizing: border-box;
    justify-content: flex-end;
    height: 20px;
    margin-bottom: 1vh;
  }

  .r2 {
    display: grid;
    grid-gap: 1vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: calc(100% - 30vh);
  }

  .block-box {
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgb(93 173 205 / 35%);
    background: linear-gradient(180deg, rgb(1 49 85 / 65%) 0%, rgb(1 49 85 / 35%) 100%);
  }

  .block-title {
    position: absolute;
    right: 0;
    left: 0;
    height: 4vh;
    color: #fff;
    line-height: 4vh;
    text-align: center;
  }

  .block-main {
    height: 100%;
    overflow: hidden;
  }
}

.ws-alarm-box {
  position: fixed;
  z-index: 9999;
  right: 20px;
  bottom: 20px;

  .ws-alarm {
    position: relative;
    box-sizing: border-box;
    width: 43vh;
    height: 30vh;
    margin-top: 2vh;
    border: 1px solid rgb(93 173 205 / 35%);
    background: rgb(1 49 85);
  }

  .ws-title {
    height: 3vh;
    color: #fff;
    font-size: 2.4vh;
    font-weight: 600;
    line-height: 3vh;
    text-align: center;
  }

  .ws-content {
    padding: 3vh;
    overflow: hidden;
    color: #fff;
    font-size: 2vh;
    line-height: 4vh;
  }

  .ws-clese-box {
    display: flex;
    justify-content: center;
    padding-top: 3vh;
  }

  .ws-close {
    display: inline-block;
    height: 4vh;
    padding: 0 4vh;
    border: 1px solid #ddd;
    border-radius: 0.5vh;
    font-size: 2vh;
    line-height: 4vh;
    cursor: pointer;
  }
}
</style>
